<template>
	<view>
		<!--动态卡片-->
		<block v-if="type == 'dynamic'">
			<view class="my-card-list cu-card dynamic no-card ">
				<view class="cu-item shadow" v-for="item in list.datas" :key="item.id">
					<view class="cu-list menu-avatar" @click="goTo" :data-path="toUrl2(item.id)">
						<view class="cu-item">
							<!-- <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view> -->
							<view class="cu-avatar round lg bg-gradual-blue">
								<text class="avatar-text">
									{{ (item.user && item.user.name) || (item.teacher && item.teacher.name) || (item.student && item.student.name) || appName }}
								</text>
							</view>
							<!-- <image :src="imgServer + item.pic" class="radius" mode="aspectFill"></image> -->
							<view class="content flex-sub">
								<view>{{ item.name }}</view>
								<view class="text-gray text-sm flex justify-between">{{ $util.dateFormat(item.added_time) }}</view>
							</view>
						</view>
					</view>
					<view class="text-content" @click="goTo" :data-path="toUrl2(item.id)"><rich-text :nodes="item.intro || item.detail"></rich-text></view>
					<!-- <view class="grid flex-sub padding-lr" v-if="item.pic!=null" :class="item.pic && item.pic.split(';').length > 1 ? 'col-3 grid-square' : 'col-1'">
						<view
							class="bg-img"
							:class="item.pic && item.pic.split(';').length > 1 ? '' : 'only-img'"
							:style="'background-image:url(' + imgServer + img + ');'"
							v-for="(img, index) in item.pic.split(';').length > 1 ? item.pic.split(';') : [item.pic]"
							:key="index"
						></view> 
					</view> -->
					<view class="text-gray text-sm text-right padding">
						<text class="cuIcon-attentionfill margin-lr-xs"></text>
						0
						<text class="cuIcon-appreciatefill margin-lr-xs"></text>
						0
						<text class="cuIcon-messagefill margin-lr-xs"></text>
						0
					</view>
				</view>
			</view>
		</block>
		<!-- <view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-title text-orange "></text>
				消息列表
			</view>
		</view> -->
		<!-- <uni-collapse :accordion="true" v-if="type == 'collapse'"> 
	    	<uni-collapse-item v-for="(item, index) in list.datas" :key="index" :title="item.name" :show-animation="true"  >
	    		<text class="content">{{item.intro }}</text>
	    	</uni-collapse-item>
	    </uni-collapse> -->
		<!--消息列表 -->
		<view class="my-card-list cu-list menu-avatar" v-if="type == 'message'">
			<!-- <view class="cu-item">
				<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
				<view class="content">
					<view class="text-grey">凯尔</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							<text class="cuIcon-infofill text-red  margin-right-xs"></text>
							我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
						</view>
					</view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">22:20</view>
					<view class="cu-tag round bg-grey sm">5</view>
				</view>
			</view> -->
			<!-- <view class="cu-item">
				<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);">
					<view class="cu-tag badge">99+</view>
				</view>
				<view class="content">
					<view class="text-grey">
						<view class="text-cut">瓦洛兰之盾-塔里克</view>
						<view class="cu-tag round bg-orange sm">战士</view>
					</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							塔里克是保护者星灵，用超乎寻常的力量守护着符文之地的生命、仁爱以及万物之美。塔里克由于渎职而被放逐，离开了祖国德玛西亚，前去攀登巨神峰寻找救赎，但他找到的却是来自星界的更高层的召唤。现在的塔里克与古代巨神族的神力相融合，以瓦洛兰之盾的身份，永不疲倦地警惕着阴险狡诈的虚空腐化之力。
						</view>
					</view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">22:20</view>
					<view class="cuIcon-notice_forbid_fill text-gray"></view>
				</view>
			</view> -->
			<view class="cu-item " v-for="(item, index) in list.datas" :key="index" @click="goTo" :data-path="toUrl2(item.id)">
				<view class="cu-avatar radius lg" :style="'background-image:url(' + imgServer + item.pic + ');'"></view>
				<view class="content">
					<view class="text-pink">
						<view class="text-cut">{{ item.name }}</view>
					</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">{{ item.intro }}</view>
					</view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">{{ $util.dateFormat(item.added_time) }}</view>
					<!-- <view class="cu-tag round bg-red sm"></view> -->
				</view>
			</view>
			<!-- <view class="cu-item grayscale">
				<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view>
				<view class="content">
					<view>
						<view class="text-cut">伊泽瑞尔</view>
						<view class="cu-tag round bg-orange sm">断开连接...</view>
					</view>
					<view class="text-gray text-sm flex"><view class="text-cut">等我回来一个打十个</view></view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">22:20</view>
					<view class="cu-tag round bg-red sm">5</view>
				</view>
			</view> -->
			<!-- <view class="cu-item cur">
				<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg);">
					<view class="cu-tag badge"></view>
				</view>
				<view class="content">
					<view>
						<view class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</view>
						<view class="cu-tag round bg-orange sm">6人</view>
					</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							伊泽瑞尔：
							<text class="cuIcon-locationfill text-orange margin-right-xs"></text>
							传送中...
						</view>
					</view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">22:20</view>
					<view class="cuIcon-notice_forbid_fill text-gray"></view>
				</view>
			</view> -->
		</view>
		<!--时间轴列表 使用于二级菜单 比如课程章节的子章节-->
		<view class="my-card-list cu-timeline padding-top-sm padding-bottom-sm" v-if="type == 'timeline'">
			<view class="cu-item text-green" :class="{ 'padding-bottom-0': item.childs.length > 0 }" v-for="(item, index) in list.datas" :key="index">
				<view class="content bg-white">
					<view class="cu-capsule radius" @click="goTo" :data-path="toUrl2(item.id)">
						<text class="text-gree text-df text-bold">{{ item.name }}</text>
						<!-- <view class="cu-tag line-cyan">版本</view> -->
					</view>
					<view class="margin-top-sm text-content" v-if="item.childs.length > 0">
						<view class="cu-list menu">
							<view class="cu-item" :class="true ? 'arrow' : ''" v-for="(item2, index) in item.childs" :key="index" @click="goTo" :data-path="toUrl2(item2.id)">
								<view class="content">
									<text class="cuIcon-read text-gree text-xs"></text>
									<text class="text-gree">{{ item2.name }}</text>
								</view>
								<view class="action"><!-- <view class="cu-tag round bg-blue light">旅行</view> --></view>
							</view>
						</view>
						<!-- <view v-for="(item, index) in item.childs" :key="index" >{{ item.name }}</view> -->
					</view>
				</view>
			</view>
		</view>
		<block v-if="type == 'timeline2'">
			<view class="cu-timeline padding-left-sm padding-top-sm" v-for="(item, index) in groups" :key="index">
				<view class="cu-time" style="font-size: 23rpx;">{{ $util.dateFormat(item.added_time) }}</view>
				<view class="cu-item cur " v-for="(o, i) in item.items" :key="i">
					<view class="content shadow-blur" :class="i % 2 == 0 ? 'bg-cyan' : index % 3 == 0 ? 'bg-green' : 'bg-grey'">
						<text>{{ $util.dateFormat(o.added_time, 'h:m') }}{{ o.status }}</text>
						【{{ o.clock.type }}】{{ o.clock.course.name }}
					</view>
				</view>
			</view>
		</block>
		<!--商品类卡片-->
		<view class="my-card-list cu-card goods no-card " v-if="type == 'goods'">
			<my-card-header v-show="showHeader"></my-card-header>
			<view class="card-section">
				<view v-for="(item, index) in list.datas" :key="index" class="card-item" @click="goTo" :data-path="'/pages/goods/detail?id=' + item.id">
					<view class="image-wrapper"><image :src="imgServer + item.main_photo" mode="aspectFill"></image></view>
					<text class="title text-cut">{{ item.name }}</text>
					<text class="text-price text-red">{{ item.price }}</text>
				</view>
			</view>
		</view>
		<!--文章列表卡片-->
		<view class="my-card-list cu-card article" :class="true ? 'no-card' : ''" v-if="type == 'article'">
			<my-card-header v-if="showHeader" :icon="headerIcon" :title="headerTitle" :title2="headerTitle2" :isright="isHeaderRight" :url="headerUrl"></my-card-header>
			<view class="cu-item shadow" v-for="(item, index) in list.datas" :key="index" @click="goTo" :data-path="toUrl2(item.id)">
				<view class="img" v-if="item.pic"><image :src="imgServer + item.pic" class="radius" mode="aspectFill"></image></view>
				<view class="desc">
					<view class="text-gree text-title">
						<view class="text-cut">{{ item.name }}</view>
					</view>
					<view class="text-content text-cut"><rich-text :nodes="item.intro || item.detail"></rich-text></view>
					<view class="text-tag">
						<view class="cu-tag bg-olive light sm round">
							{{ (item.user && item.user.name) || (item.teacher && item.teacher.name) || (item.student && item.student.name) || appName }}
						</view>
						<view class="cu-tag bg-orange light sm round">{{ $util.dateFormat(item.added_time) }}</view>
						<!-- <view class="cu-tag bg-cyan light sm round" >{{ item.visitNum||10 }}人学习</view> -->
						<view class="cu-tag bg-cyan light sm round">{{ (item.category && item.category.name) || '' }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="my-card-list cu-card swipeaction" :class="true ? 'no-card' : ''" v-if="type == 'swipeaction'">
			<my-card-header v-if="showHeader" :icon="headerIcon" :title="headerTitle" :title2="headerTitle2" :url="headerUrl"></my-card-header>
			<uni-swipe-action>
				<uni-swipe-action-item v-for="(item, index) in list.datas" :key="index" :right-options="_swipeOptions"
					@change="swipeChange($event, index,item.id,item)" @click="swipeClick($event, index,item.id,item)">
					<view class="content-box" @click.stop="goTo" :data-path="toUrl22(item.id)">
						<!--<text class="content-text">{{ item.name }}</text>-->
						<view class="img" v-if="item.pic">
							<image :src="toUrl(item.pic)" class="radius" mode="aspectFill"></image>
						</view>  
						<view class="desc">  
						  <slot :item="item" :appName="appName" :datetime="$util.dateFormat(item.added_time)" :qrcodeUrl="qrcodeUrl(item) ">
							<view class="text-gree text-title">
								<view class="text-cut">{{item.name}}</view> 
							</view>
							<view class="text-content text-cut" v-if="item.intro || item.detail">
								<rich-text :nodes="item.intro || item.detail"></rich-text>
							</view>
							<view class="text-tag margin-top-sm">
								<view class="cu-tag bg-olive light sm round">
									{{ (item.user && item.user.username) || (item.teacher && item.teacher.username) || (item.student && item.student.username) || appName }}
								</view>
								<view class="cu-tag bg-orange light sm round">{{ $util.dateFormat(item.added_time) }}
								</view>
								<!-- <view class="cu-tag bg-cyan light sm round" >{{ item.visitNum||10 }}人学习</view> -->
								<view class="cu-tag bg-cyan light sm round" v-if="item.category">
									{{ (item.category && item.category.name) || '' }}
								</view>
							</view>  
						  </slot>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<uni-load-more  v-if="showLoadMore" :status="list.status" :content-text="list.statusText" color="#ccc"></uni-load-more>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import myCardHeader from '@/components/my-card-header/my-card-header.vue';
import baseMixin from '@/mixin/base.js';
import http from '@/common/http';
import api from '@/common/api.js';
import { mapState, mapMutations } from 'vuex';
/* import uniCollapse from '@/components/uni-collapse/uni-collapse.vue' 
import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue' */
export default {
	components: {
		uniLoadMore,
		myCardHeader
	},
	mixins: [baseMixin],
	data() {
		return {
			isCard: false			
		};
	},
	computed: {
		...mapState('base', ['logo', 'appName']),
		list() {
			//console.error( this.listData.list)
			var data, status;
			if (Array.isArray(this.listData)) {
				data = this.listData;
				status = 'noMore';
			} else {
				data = this.listData.list;
				status = this.listData.loadStatus;
			}
			return {
				datas: data,
				status: status, //more、loading、noMore
				statusText: {
					contentdown: '上拉查看更多',
					contentrefresh: '努力加载中',
					contentnomore: '————————  我也是有底线的  ————————'
				}
			};
		},
		groups() {
			//https://www.cnblogs.com/fozero/p/11254572.html
			let newArr = [];
			var that = this;
			this.listData.list &&
				this.listData.list.forEach((item, i) => {
					let index = -1;
					let isExists = newArr.some((newItem, j) => {
						if (that.$util.dateFormat(item.added_time) == that.$util.dateFormat(newItem.added_time)) {
							index = j;
							return true;
						}
					});
					if (!isExists) {
						newArr.push({
							added_time: that.$util.dateFormat(item.added_time),
							timeDay: item.timeDay,
							timeMonth: item.timeMonth,
							items: [item]
						});
					} else {
						newArr[index].items.push(item);
					}
				});
			//console.error(newArr )
			return newArr;
		},
		_swipeOptions(){
			
			var _so=[]
			//if(this.swipeOptions){
				for(var i in this.swipeOptions){
					
					var o=this.swipeOptions[i]
					var style={}
					for(var a in o ){ 
						
						if("text|onclick".indexOf(a)==-1 ){
							style[a]=o[a]
							delete o[a]
						} 
					}
					o.style=style
					_so.push(o)
				}
			//}
			
			//console.log(JSON.stringify(_so ))
			return _so
		}
	},
	methods: {
		toUrl2(id) {
			if (this.url.lastIndexOf('?') < 0) {
				return this.url + '?id=' + id;
			} else {
				return this.url + '&id=' + id;
			}
		},
		swipeChange(e, index) {
			//console.log('返回：', e);
			//console.log('当前索引：', index);
		},
		swipeClick(e, index, id) {
			let { content } = e;
			var that = this;
			//console.error(id)
			if (content.text === '删除') {
				uni.showModal({
					title: '提示',
					content: '是否删除',
					success: res => {
						if (res.confirm) {
							http.get(that.deleteUrl + '/' + id).then(res => {
								that.list.datas.splice(index, 1);
							});
						}
					}
				});
			} else if (content.text === '修改') {
				this.$util.goTo(this.updatePath + '?id=' + id); //跳转到修改页面
			}else if(content.onclick){
				if(api[content.onclick]){
					api[content.onclick].apply(that, [e, index, id,item]);
				}else if(this[content.onclick]){
					this[content.onclick].apply(that, [e, index, id,item]);
				} 
			}
		},
		qrcodeUrl(item) {
			var opts = this.qrcodeOptions;
			var ps = this.qrcodeOptions.param.split('.');
			var v = item;
			for (var i in ps) {
				v = v[ps[i]];
			}
			console.log(`/api/qrcode?text=${opts.type}:${opts.body}:${v}`);
			return this.toUrl2(`/api/qrcode?text=${opts.type}:${opts.body}:${v}`);
		}
	},
	props: {
		type: {
			type: String,
			default: 'goods' //dynamic  goods article
		},
		url: {
			type: String,
			default: '' //点击跳转地址
		},
		deleteUrl: {
			type: String,
			default: '' //删除api接口地址
		},
		updatePath: {
			type: String,
			default: '' //修改页面
		},
		showHeader: {
			type: Boolean,
			default: true
		},
		headerIcon: {
			type: String,
			default: 'cuIcon-evaluate_fill'
		},
		headerTitle: {
			type: String,
			default: '热门推荐'
		},
		headerTitle2: {
			type: String,
			default: 'hot recommend'
		},
		headerUrl: {
			type: String,
			default: ''
		},
		isHeaderRight: {
			type: Boolean,
			default: true
		},
		showImage: {
			type: Boolean,
			default: true
		},
		showLoadMore: {
			type: Boolean,
			default: true
		},
		listData: {
			//数据列表
			type: [Object, Array],
			default() {
				return {
					list: [],
					loadStatus: 'noMore' //加载状态
				}; //{list:[],LoadStatus:""noMore}
			}
		},
		swipeOptions: {
			//数据列表
			type: Array,
			default () {
				return [
				/*{
						text: '添加',
						style: {
							backgroundColor: '#F56C6C'
						}
					},{
							text: '置顶'
						},*/
				{
					text: '删除',
					backgroundColor: 'rgb(255,58,49)'					
				},
				{
					text: '修改',
					backgroundColor: 'rgb(254,156,1)'				
				}
			]
			}
		},
		qrcodeOptions: {
			//二维码生成选项设置
			type: Object,
			default() {
				return {
					type: 'method',
					body: 'BindClasss',
					param: 'id'
				};
			}
		}
	}
};
</script>

<style lang="scss">
.card-header {
	display: flex;
	align-items: center;
	height: 140upx;
	padding: 3upx $uni-spacing-col-lg 8upx;
	background: #fff;
	image {
		flex-shrink: 0;
		width: 80upx;
		height: 80upx;
		margin-right: 20upx;
	}
	.myIcon {
		font-size: $uni-img-size-lg;
	}
	.tit-box {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.tit {
		font-size: $uni-font-size-lg + 2upx;
		color: $uni-text-color;
		line-height: 1.3;
	}
	.tit2 {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
	}
	.cuIcon-right {
		font-size: $uni-font-size-lg + 2upx;
		color: $uni-text-color-grey;
	}
}
.card-section {
	display: flex;
	flex-wrap: wrap;
	padding: $uni-spacing-col-sm $uni-spacing-col-lg;
	background: #fff;
	.card-item {
		display: flex;
		flex-direction: column;
		width: 48%;
		padding-bottom: 40upx;
		&:nth-child(2n + 1) {
			margin-right: 4%;
		}
	}
	.image-wrapper {
		width: 100%;
		height: 350upx;
		border-radius: 3px;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
			opacity: 1;
		}
	}
	.title {
		font-size: $uni-font-size-lg;
		color: $uni-text-color;
		line-height: 80upx;
	}
	.price {
		line-height: 1;
	}
}
.my-card-list.cu-card.dynamic > .cu-item > .text-content {
	max-height: 300rpx;
	overflow: hidden;
}
.my-card-list.cu-timeline > .cu-item.padding-bottom-0 {
	padding-bottom: 0;
	margin-bottom: -4rpx;
}
.my-card-list.cu-timeline > .cu-item {
	padding-left: 90rpx;
	> .content {
		padding: 0upx;
		padding-top: 10rpx;
		padding-left: 0;
	}
	.cu-list.menu > .cu-item {
		padding: 0 0rpx;
	}
	.cu-list.menu > .cu-item::after {
		border: 0;
	}
	[class*='cuIcon-'] {
		font-size: 26rpx;
	}
	.cu-list.menu > .cu-item .content > text {
		margin-right: 3rpx;
	}
}
.my-card-list.cu-timeline > .cu-item:last-child {
	padding-bottom: 70rpx;
}
.my-card-list.cu-timeline > .cu-item::before {
	left: 17rpx;
}
.my-card-list.cu-timeline > .cu-item::after {
	left: 42rpx;
	width: 1rpx;
}
.my-card-list.article {
	display: block;
	.cu-item:first-child {
		padding-top: 25rpx;
	}
	.cu-item:last-child {
		padding-bottom: 35rpx;
	}
	> .cu-item {
		display: flex;
		padding: 0 30upx;
		padding-bottom: 30upx;
		> .img {
			flex: 1;

			> image {
				width: 240upx;
				height: 5.2em;
				margin-right: 20upx;
				border-radius: 6upx;
			}
		}
		> .desc {
			flex: 2;
			min-width: 0;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			.text-title {
				font-size: 30rpx;
				line-height: 30rpx;
			}
			.text-content {
				font-size: 26upx;
				color: #888;
				overflow: hidden;
			}
			.text-content,
			.text-tag {
				margin-top: 15rpx;
			}
		}
	}
}
/*swap-action*/
.my-card-list.swipeaction.swipeaction {
	.content-box {
		flex: 1;
		/* #ifdef APP-NVUE */
		justify-content: center;
		/* #endif */
		/*
		height: 50px;
		line-height: 50px;
		*/
		padding: 17px 15px;
		position: relative;
		background-color: #fff;
		border-bottom-color: #f5f5f5;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}

	.content-text {
		font-size: 15px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding: 10px 0;
		background-color: #fff;
	}

	.button {
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		padding: 4px 8px;
		border-radius: 4px;
	}

	.button-text {
		font-size: 15px;
	}

	.slot-button {
		/* #ifndef APP-NVUE */
		display: flex;
		height: 100%;
		/* #endif */
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 20px;
		background-color: #ff5a5f;
	}

	.slot-button-text {
		color: #ffffff;
		font-size: 14px;
	}
}
</style>
